# Field

<Subtitle>A component that provides labeling and validation for form controls.</Subtitle>

<Meta
  name="description"
  content="A high-quality, unstyled React field component that provides labeling and validation for form controls."
/>

import { DemoFieldHero } from './demos/hero';

<DemoFieldHero />

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Field } from '@base-ui-components/react/field';

<Field.Root>
  <Field.Label />
  <Field.Control />
  <Field.Description />
  <Field.Item />
  <Field.Error />
  <Field.Validity />
</Field.Root>;
```

## API reference

<Reference component="Field" parts="Root, Label, Control, Description, Item, Error, Validity" />
